<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <script src="qt/qwebchannel.js"></script>

    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="layui/layui.js"></script>
</head>
<body>

<div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">name</label>
        <div class="layui-input-block">
            <input type="text" id="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">age</label>
        <div class="layui-input-block">
            <input type="text" id="age" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

</div>


<script>


    window.onload = function () {
        new QWebChannel(qt.webChannelTransport, function (channel) {

            webchared = channel.objects.webchared;
            window.webchared = channel.objects.webchared;

            //从Pyqt触发信号，并把值从qt传到web
            webchared.Sig_Send_SetNameView_ToJS.connect(function (namestr) {
                var name_input = document.getElementById("name");
                name_input.value = namestr;
            });

            webchared.Sig_Get_Name_ToJS.connect(function () {
                var name_input = document.getElementById("name");
                var age_input = document.getElementById("age");

                var jsdata = {
                    'name': name_input.value,
                    'age': age_input.value,
                }
                console.log(jsdata);
                webchared.sig_Recv_Get_Value_FromJS(JSON.stringify(jsdata))
            });
        });
    }

    var name_input = document.getElementById("name");
    name_input.oninput = function () {
        if (window.webchared) {
            window.webchared.sig_Recv_Send_SetPyqtview_FromJS(name_input.value);
        }
    }

</script>


</body>

</html>
